<template>
  <div class="laborCosts-box">
    <!-- 外协商工费管理 -->
    <serchForm
      :Form="inventoryForm"
      :FormLabel="inventoryFormLabel"
      @onSearch="onSearch"
      @saleClientChange="saleClientChange"
    />
    <div class="function-box">
      <el-button
        class="visitBtn"
        @click="updateInfo"
        v-show="false"
      ><i class="iconfont icon-daochu"></i>
        导出
      </el-button>
    </div>
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
    />
  </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { selectOutsourceFeeApi } from '@/api/outsourcing'
import { ref, onMounted } from 'vue';
const idActive = 'outsourcingId'
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 表单
let inventoryForm = ref(
  {
    outsourcingId: '',      // 外协商编号
    outsourcingName: '',    // 外协商名称
    orderId: '',             // 单据编号
    // projectName: '',      // 项目名称
    attn: ''              // 经办人
  }
)
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'outsourcingId',
    label: '外协商编号'
  },
  {
    name: 'outsourcingName',
    label: '外协商名称'
  },
  {
    name: 'orderId',
    label: '单据编号'
  },
  // {
  //     name: 'projectName',
  //     label: '项目名称'
  // },
  {
    name: 'attn',
    label: '经办人',
    type: 'select',
    client: [
      {
        label: '虾米',
        value: '1'
      },
      {
        label: '杨梅',
        value: '2'
      },
    ]
  },
])
// 查找
const onSearch = (v) => {
  pageNum.value = 1
  getoutboundOrderData(v)
}
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref(null)


// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'outsourcingId',
    label: '外协商编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'orderId',
    label: '单据编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'outsourcingName',
    label: '外协商名称',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'outsourcingType',
    label: '外协商类别',
    minwidth: 100
  },
  {
    prop: 'orderDate',
    label: '外协商日期',
    minwidth: 100
  },
  // {
  //     prop: 'projectName',
  //     label: '项目名称'
  // },
  {
    prop: 'outsourcingContent',
    label: '外协内容',
    minwidth: 100
  },
  {
    prop: 'costCategory',
    label: '成本类别',
    minwidth: 100
  },
  {
    prop: 'paymentAmount',
    label: '货款金额',
    minwidth: 100
  },
  {
    prop: 'debtMoney',
    label: '欠款金额',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'paymentMethods',
    label: '付款方式',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'paymentStatus',
    label: '付款状态',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'attn',
    label: '经办人',
    colorClassName: 'activeColor'
  },
  {
    prop: 'deptName',
    label: '部门',
    colorClassName: 'activeColor'
  },
  {
    prop: 'remarks',
    label: '备注',
    colorClassName: 'activeColor'
  },
])
// 表格数据内容
let inventoryTableData = ref([

])

// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
  console.log(v);
}
// 查询
const saleClientChange = (v) => {
  console.log(inventoryForm.value);
}
// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  getoutboundOrderData(inventoryForm.value)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v);
}
// 请求外协商接口函数
const getoutboundOrderData = async (data = '') => {
  let data1 = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data1, data)
  let res = await selectOutsourceFeeApi(params)
  let { code, total } = res
  if (code == 200) {
    inventoryTableData.value = res.rows
    totals.value = total
  }
}
onMounted(() => {
  getoutboundOrderData()
})
</script>
<style scoped lang='scss'>
.laborCosts-box {
  padding: 16px;

  .function-box {
    display: flex;
    align-items: center;
  }
}
</style>
